<template>
    <div class="sass_root">
		<el-button class="add-power" type="primary" @click="addNext(-1)">新增</el-button>
        <edit-power :tableData="tableData" :showHeader="true" @add-next="addNext" @power-delete="powerDelete" @power-edit="powerEdit" @show-check-box="showCheckBox" @sort-input="sortInput" @pNameInput="pNameInput" @is-home-show="isHomeShow" @is-new="isNew" curr_in="1">
			<!-- <template v-slot:default="scope">
				<edit-power :tableData="scope.row.data" :showHeader="false" class="second_level" @add-next="addNext" @power-delete="powerDelete" @power-edit="powerEdit" @show-check-box="showCheckBox" @sort-input="sortInput" @pNameInput="pNameInput" @is-home-show="isHomeShow" @is-new="isNew" curr_in="2">
					<template v-slot:default="t_scope">
						<edit-power v-if="t_scope.row.data&&t_scope.row.data.length>0" :tableData="t_scope.row.data" :showHeader="false" :hideSlot="true" @add-next="addNext" @power-delete="powerDelete" @power-edit="powerEdit" @show-check-box="showCheckBox" @sort-input="sortInput" @pNameInput="pNameInput" @is-home-show="isHomeShow" @is-new="isNew" curr_in="3">
							<template v-slot:default="t_scope">
								<edit-power v-if="t_scope.row.data&&t_scope.row.data.length>0" :tableData="t_scope.row.data" :showHeader="false" :hideSlot="true" @add-next="addNext" @power-delete="powerDelete" @power-edit="powerEdit" @show-check-box="showCheckBox" @sort-input="sortInput" @pNameInput="pNameInput" @is-home-show="isHomeShow" @is-new="isNew" curr_in="4"></edit-power>
							</template>
						</edit-power>
					</template>
				</edit-power>
			</template> -->
        </edit-power>
		<!-- 新增1 -->
		<!-- <msg-box :show_msg_box="show_add_box" @closeMsg="show_add_box=false" @subMsg="subAdd">
			<div class="add_power_info">
				<div class="add_sort">  
					<p>输入排序数字</p>
					<el-input v-model="add_info.pSort"></el-input>
				</div>
				<div class="add_name">
					<p>输入名称</p>
					<el-input v-model="add_info.pName"></el-input>
				</div>
			</div>
		</msg-box> -->
		<!-- 编辑 -->
		<msg-box :show_msg_box="show_upd_box||show_updadd_box" @close-msg="show_upd_box=false;show_updadd_box=false;" @sub-msg="show_upd_box?subUpd():subAdd()">
			<div class="upd_power_info">
				<ul>
					<li>
						<div class="udp_power_item udp_select_item ">
							<span>更换上级权限:</span>
							<el-select v-model="upd_info.firstFid" placeholder="请选择" class="elSelectW" @change="firstFidChange">
								<el-option
								v-for="item in tableData"
								:key="item.pId"
								:label="item.pName"
								:value="item.pId">
								</el-option>
							</el-select>
							<el-select v-model="upd_info.secondFid" placeholder="请选择" class="elSelectW" @change="secondFidChange">
								<el-option
								v-for="item in secondOptions"
								:key="item.pId"
								:label="item.pName"
								:value="item.pId">
								</el-option>
							</el-select>
							<el-select v-model="upd_info.thridFid" placeholder="请选择" class="elSelectW">
								<el-option
								v-for="item in thridOptions"
								:key="item.pId"
								:label="item.pName"
								:value="item.pId">
								</el-option>
							</el-select>
						</div>
					</li>
					<li>
						<div class="udp_power_item">
							<span>排序:</span>
							<el-input v-model="upd_info.pSort"></el-input>
						</div>
						<div class="udp_power_item">
							<span>权限名称:</span>
							<el-input v-model="upd_info.pName"></el-input>
						</div>
					</li>
					<li>
						<div class="udp_power_item">
							<span>图片标识:</span>
							<el-input v-model="upd_info.pIcon"></el-input>
						</div>
						<div class="udp_power_item">
							<span>是否前端显示:</span>
							<el-switch
								v-model="upd_info.pSet"
								active-value="1"
    							inactive-value="0"
								active-color="#13ce66"
								inactive-color="#ff4949">
							</el-switch>
						</div>
					</li>
					<li>
						<div class="udp_power_item">
							<span>act:</span>
							<el-input v-model="upd_info.pAct"></el-input>
						</div>
						<div class="udp_power_item">
							<span>op:</span>
							<el-input v-model="upd_info.pOp"></el-input>
						</div>
					</li>
					<li>
						<div class="udp_power_item">
							<span>是展示标识new:</span>
							<el-switch
								v-model="upd_info.is_new"
								active-value="1"
    							inactive-value="0"
								active-color="#13ce66"
								inactive-color="#ff4949">
							</el-switch>
						</div>
						<div class="udp_power_item">
							<span>是否首页显示:</span>
							<el-switch
								v-model="upd_info.home_show"
								active-value="1"
    							inactive-value="0"
								active-color="#13ce66"
								inactive-color="#ff4949">
							</el-switch>
						</div>
					</li>
					<li>
						<div class="udp_power_item">
							<span>自定义new内容:</span>
							<el-input v-model="upd_info.diy_filed"></el-input>
						</div>
						<div class="udp_power_item" v-if="!show_upd_box">
							<span>全部开启:</span>
							<el-switch
								v-model="upd_info.is_default_open"
								active-value="1"
    							inactive-value="0"
								active-color="#13ce66"
								inactive-color="#ff4949">
							</el-switch>
						</div>
					</li>
				</ul>
			</div>

		</msg-box>
    </div>
</template>
<script>
// import editPower from '@/components/home/edit-power.vue'
import editPower from '@/views/home/control-panel/sass/EditPower.vue'
import msgBox from '@/components/home/msg-box.vue'
export default {
	name: "sass-list",
    data() {
        return {
			tableData:[],
			secondOptions:[],
			thridOptions:[],
			show_add_box:false,
			show_updadd_box:false,
			show_upd_box:false,
			add_info:{
				curr_pId:13,
				pSort:1,
				pName:'',
				pAct: "sale",
				pOp: "son6",
			},
			upd_info:{
				firstFid:'',
				secondFid:'',
				thridFid:'',
				curr_pId:'',
				pName:'',
				pSort:'',
				pAct:'',
				pOp:'',
				pSet:'',
				pIcon:'',
				pRemarks:'',
				is_new:'0',
				home_show: '0',
				diy_filed:'',
				is_default_open:'0'
			}
        }
    },
    components: {
		editPower,
		msgBox
	},
	methods:{
		sortInput(val){
			this.commonUpd({pId:val.pId,pSort:val.pSort,type:'pSort'});
		},
		pNameInput(val){
			this.commonUpd({pId:val.pId,pName:val.pName});
		},
		showCheckBox(val){
			this.commonUpd({pId:val.pId,pSet:val.pSet,type:'pSet'});
		},
		isHomeShow(val){
			this.commonUpd({pId:val.pId,home_show:val.home_show});
		},
		isNew(val){
			this.commonUpd({pId:val.pId,is_new:val.is_new});
		},
		addTopPower(){

		},
		/* 修改权限一级父级 */
		firstFidChange(id){
			this.upd_info.secondFid = '';
			this.thridOptions = []
			this.upd_info.thridFid = '';
			this.tableData.forEach((item,index)=>{
				if(item.pId===id){
					this.secondOptions = item.data;
				}
			})
		},
		/* 修改权限二级父级 */
		secondFidChange(id){
			this.upd_info.thridFid = '';
			this.tableData.forEach((item,index)=>{
				item.data?.forEach((sitem,sindex)=>{
					if(sitem.pId===id){
						this.thridOptions = sitem.data;
					}
				})
			})
		},
		/* 新增权限 */
		subAdd(){
			let pName,fId,pAct,pOp,pSet,pIcon,pRemarks,pSort,is_new,home_show,diy_filed,is_default_open;
			pName = this.upd_info.pName;
			fId = this.upd_info.thridFid||this.upd_info.secondFid||this.upd_info.firstFid;
			pAct = this.upd_info.pAct;
			pOp = this.upd_info.pOp;
			pSet = this.upd_info.pSet;
			pIcon = this.upd_info.pIcon;
			pRemarks = this.upd_info.pRemarks;
			pSort = this.upd_info.pSort;
			is_new = this.upd_info.is_new||0;
			home_show = this.upd_info.home_show||0;
			diy_filed =  this.upd_info.diy_filed;
			is_default_open =  this.upd_info.is_default_open;
			this.$http.post("/admin/store/index.php?act=storePermission&op=addPermission", 
			{fId,pName,pAct,pOp,pSet,pIcon,pSort,pRemarks,is_new,home_show,diy_filed,is_default_open})
			.then(res => {
				// console.log("添加", res);
				if(res.code==1){
					this.getDataFn();
					this.show_updadd_box = false;
					this.$message({
						message: res.msg,
						showClose:true,
						type: 'success'
					});
				}else{
					this.$message({
						message: res.msg,
						type: 'warning'
					});
				}
			});
		},
		addNext(id,curr_in,curr_index){
			/* 新增 */
			if(!id){
				this.$message({message: '不存在该选项或已删除',type: 'warning'});
			}
			/* 清空弹窗信息 */
			for(let key in this.upd_info){
				this.upd_info[key] = '';
			}
			if (id > 0) {
				/* 对象定位 */
				var indexObj = this.queryObj(id,curr_in,curr_index) || {}

				/* 赋值权限窗口 */
				this.add_upd_power(indexObj,curr_in*1+1);

				// 关联分类
				const parentsArr = [...this.getParentId(this.tableData, id), {pId: id}]
				if (parentsArr.length > 0) {
					this.upd_info.firstFid = parentsArr[0] && parentsArr[0].pId || null
					if (this.upd_info.firstFid) this.firstFidChange(this.upd_info.firstFid)
					this.upd_info.secondFid = parentsArr[1] && parentsArr[1].pId || null
					if (this.upd_info.secondFid) this.secondFidChange(this.upd_info.secondFid)
					this.upd_info.thridFid = parentsArr[2] && parentsArr[2].pId || null
				}
				
			} else {console.log('3333333333')
				this.add_upd_power("", 0);
			}

			if(!this.show_updadd_box){
				this.show_updadd_box = true;
				return;
			}
		},
		powerDelete(id,curr_in,curr_index) {
			if(!confirm("Are you sure you want to delete!")){
				return;
			}
			/* 删除 */
			if(!id){
				this.$message({
					message: '不存在该选项或已删除',
					type: 'warning'
				});
			}
			this.$http
				.post("/admin/store/index.php?act=storePermission&op=delPermission", {
					pId: id
				})
				.then(res => {
					if(res.code===1){
						this.$message({
							message: '删除成功!',
							type: 'success'
						});
						let indexObj,obj;//indexObj 位置对象   obj 当前对象所在数组
						indexObj = this.queryObj(id,curr_in,curr_index);
						if(curr_in==1){
							if(this.tableData[curr_index].pId===id){
								obj = this.tableData;
							}
						}else if(curr_in==2){
							obj = this.tableData[indexObj.firstIndex].data;
						}else if(curr_in==3){
							obj = this.tableData[indexObj.firstIndex].data[indexObj.secondIndex];
						}else if(curr_in==4){
							obj = this.tableData[indexObj.firstIndex].data[indexObj.secondIndex].data[indexObj.thridIndex];
						}
						// console.log('indexObj',indexObj)
						// console.log('index---Obj',obj)
						obj.splice(curr_index,1);
					}else{
						this.$message({
							message: res.msg,
							type: 'warning'
						});
					}
				});
		},
		/* 编辑权限 */
		subUpd(dataObj){
			let obj,pId,pName,fId,pAct,pOp,pSet,pIcon,pRemarks,pSort,is_new,home_show,diy_filed,is_default_open;
			pId = this.upd_info.row.pId;
			pName = this.upd_info.pName;
			fId = this.upd_info.thridFid||this.upd_info.secondFid||this.upd_info.firstFid;
			pAct = this.upd_info.pAct;
			pOp = this.upd_info.pOp;
			pSet = this.upd_info.pSet;
			pIcon = this.upd_info.pIcon;
			pRemarks = this.upd_info.pRemarks;
			pSort = this.upd_info.pSort;
			is_new = this.upd_info.is_new||0;
			home_show = this.upd_info.home_show||0;
			diy_filed =  this.upd_info.diy_filed;
			is_default_open =  this.upd_info.is_default_open;
			obj={pId,pName,fId,pAct,pOp,pSet,pIcon,pRemarks,pSort,is_new,home_show,diy_filed,is_default_open}
			this.commonUpd(obj,(res)=>{
				if(res.code==1){
					for(var key in obj){
						this.upd_info.row[key] = obj[key];
					}
					this.$message({message: res.msg,type: 'success'});
					this.show_upd_box=false;
				}else{
					this.$message({message: res.msg,type: 'warning'});
				}
			})
		},
		commonUpd(dataObj,callBack){
			this.$http.post("/admin/store/index.php?act=storePermission&op=updatePermission",dataObj)
			.then(res => {
				if(callBack){
					callBack(res);
				}else{
					if(res.code==1){
						this.$message({message: res.msg,type: 'success'});
					}else{
						this.$message({message: res.msg,type: 'warning'});
					}
				}
			});
		},
		getParentId(datas, id, parent = null) {
            let res = []
			if (datas) {
	            for (let data of datas) {
	            	if (!data['parents']) data['parents'] = []
                    if (parent) {
                        data['parents'] = [...parent.parents, parent]
                    }
		        	if (data.pId === id) {
		        		res = data['parents']
		        	} else if (data.data) {
						const _data = {pId: data.pId, parents: data.parents}
		        		res = this.getParentId(data.data, id, _data)
		        	}
		        	if (res.length > 0) break
	            }
			}
		    return res
		},
		powerEdit(row,curr_in,curr_index) {
			/* 修改 */
			if(!row){
				this.$message({
					message: '不存在该选项或已删除',
					type: 'warning'
				});
			}
			/* 将已存在信息放上去 */
			for(let key in row){
				this.upd_info[key] = row[key]
			}
			/* 对象定位 */
			// console.log(row.pId,curr_in,curr_index)
			var indexObj = this.queryObj(row.pId,curr_in,curr_index);
			this.add_upd_power(indexObj,curr_in);
			this.upd_info.row = row;

			// 关联分类
			const parentsArr = this.getParentId(this.tableData, row.pId) || []
			if (parentsArr.length > 0) {
				this.upd_info.firstFid = parentsArr[0] && parentsArr[0].pId || null
				if (this.upd_info.firstFid) this.firstFidChange(this.upd_info.firstFid)
				this.upd_info.secondFid = parentsArr[1] && parentsArr[1].pId || null
				if (this.upd_info.secondFid) this.secondFidChange(this.upd_info.secondFid)
				this.upd_info.thridFid = parentsArr[2] && parentsArr[2].pId || null
			}

			if(!this.show_upd_box){
				this.show_upd_box = true;
				return;
			}
		},
		/* 新增和修改的弹窗权限赋值 */
		add_upd_power(indexObj,curr_in){
			// console.log(indexObj)
			curr_in = curr_in+'';
			/* 权限窗口赋值 */
			switch(curr_in){
				case '2':
					this.upd_info.firstFid = this.tableData[indexObj.firstIndex].pId;
					this.firstFidChange(this.upd_info.firstFid);
					break;
				case '3':
					this.upd_info.firstFid = this.tableData[indexObj.firstIndex].pId;
					this.firstFidChange(this.upd_info.firstFid);
					this.upd_info.secondFid = this.tableData[indexObj.firstIndex].data[indexObj.secondIndex].pId;
					break;
				case '4':
					this.upd_info.firstFid = this.tableData[indexObj.firstIndex].pId;
					this.firstFidChange(this.upd_info.firstFid);
					this.upd_info.secondFid = this.tableData[indexObj.firstIndex].data[indexObj.secondIndex].pId;
					this.secondFidChange(this.upd_info.secondFid);
					this.upd_info.thridFid = this.tableData[indexObj.firstIndex].data[indexObj.secondIndex].data[indexObj.thridIndex].pId;
					break;
				default:
					this.upd_info.firstFid = '';
					this.upd_info.secondFid = '';
					this.upd_info.thridFid = '';
			}
		},
		getDataFn() {
            var _this = this;
            /*display=0  无有效子元素 pSet=0 不展示 */
            this.$http.get('/admin/store/index.php?act=storePermission&op=permissionList')
			.then((r) => {
				if (r.code === 1) {
					var eachFn = function (obj, level) {
						if (obj && obj.length > 0) {
							let myLevel = level + 1;
							obj.forEach(function (item) {
								item.checkedChild = [];
								item.currentLevel = myLevel;
								if (myLevel === 4) {
									item.isChecked = false;
								} else {
									eachFn(item.data, myLevel);
								}
							})
						}
					};
					eachFn(r.data, 0);
					_this.tableData = r.data;
				}
			})
		},
		queryObj(id,curr_in,curr_index){
			let obj={
				firstIndex:'',
				secondIndex:'',
				thridIndex:'',
			};
			if(curr_in==1){
				if(this.tableData[curr_index].pId===id){
					obj={
						firstIndex:curr_index,
						secondIndex:'',
						thridIndex:'',
					};
				}
			}else if(curr_in==2){
				this.tableData.forEach((item,index)=>{
					if(item.data&&item.data[curr_index]&&item.data[curr_index].pId===id){
						// console.log('2级   就是你了')
						obj={
							firstIndex:index,
							secondIndex:curr_index,
							thridIndex:'',
						};
					}
				})
			}else if(curr_in==3){
				this.tableData.forEach((item,index)=>{
					if(item.data){
							item.data.forEach((value,num)=>{
							if(value.data&&value.data[curr_index]&&value.data[curr_index].pId===id){
								// console.log('3级   就是你了',value.data[curr_index])
								obj={
									firstIndex:index,
									secondIndex:num,
									thridIndex:curr_index,
								};
							}
						})
						
					};
					
				})
			}else if(curr_in==4){
				this.tableData.forEach((item,index)=>{
					if(item.data){
						item.data.forEach((value,num)=>{
							if(value.data){
								value.data.forEach((fitem,findex)=>{
									if(fitem.data&&fitem.data[curr_index]&&fitem.data[curr_index].pId===id){
										// console.log('4级   就是你了',value.data[curr_index])
										obj={
											firstIndex:index,
											secondIndex:num,
											thridIndex:findex,
											fourthIndex:curr_index,
										};
									}
								})
							}
						})
					};
				})
			}
			return obj;
		},
		
	},
	mounted(){
		// console.log(this)
		this.getDataFn();
	}

}
</script>
<style lang="scss" scoped>
.sass_root {
	height: calc(100% - 48px);
	margin-top: 18px;
	.add-power {
		position:absolute;
		top: 11px;
		right: 10px;
	}
}
/deep/.el-table__expanded-cell[class*="cell"] {
    padding-top: 0;
    padding-right: 0;
}
/deep/.second_level .el-table__expanded-cell{
	// padding: 0;
	// border: none;
	padding-bottom: 0;
	border-bottom: none;
}
/* 新增样式 */
.add_power_info{
	display: flex;
	justify-content: space-between;
	padding: 5px  10px 30px;
}
.add_power_info p{
	text-align: center;
	line-height: 40px;
}
.add_sort /deep/.el-input__inner{
	width: 80px;
	height: 32px;
	line-height: 32px;
}
.add_name /deep/.el-input__inner{
	width: 200px;
	height: 32px;
	line-height: 32px;
}
/deep/.new_add_next, /deep/ .close_btn { cursor: pointer; }
/* 修改样式 */
.upd_power_info{
	width: 700px;
	padding: 15px;
	font-size: 14px;
}
.upd_power_info li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.udp_select_item /deep/.el-select{
	margin-right: 20px;
}
.udp_power_item{
	display: flex;
	align-items: center;
	flex:1;
	&>span{
		width: 120px;
		line-height: 40px;
	}
	/deep/.el-input{
		width: 200px;
	}
}
/* 顶部新增按钮 */
/* .btn_box{
	border-bottom: 1px solid #e2e2e2;
	padding: 0 0 20px 0;
	.add_top_btn{
		width: 60px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		background: #19B0DF;
		text-align: center;
		font-size: 14px;
		border-radius: 5px;
	}
} */
.elSelectW /deep/.el-input{
	width: 165px;
}

</style>